<template>
  <div class="thirdParty-container">
    <div class="box">
      <div @click="use('wechart')">
        <IconAli :sty="{width:'40px',height:'40px'}" icon='wechart'></IconAli>
      </div>
      <div @click="use('qq')">
        <IconAli :sty="{width:'40px',height:'40px'}" icon='qq'></IconAli>
      </div>
      <div @click="use('alipay')">
        <IconAli :sty="{width:'42px',height:'42px'}" icon='alipay'></IconAli>
      </div>

      <div @click="use('gitee')">
        <IconAli :sty="{width:'38px',height:'38px'}" icon='gitee'></IconAli>
      </div>

      <div @click="use('github')">
        <IconAli :sty="{width:'40px',height:'40px'}" icon='github'></IconAli>
      </div>

    </div>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "ThirdParty",
  props: [],
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {}
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    use(tab) {
      switch (tab){
        case 'github':
            this.axios.get("/login-web/github/oauth2")
            .then((data)=>{
              window.open(data.data,"_blank");
            })
          break;
        case 'gitee':
          this.axios.get("/login-web/gitee/url")
              .then((data)=>{
                window.open(data.data,"_blank");
              })
          break;
      }
    },
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.thirdParty-container {
  background-color: #FFF;
  padding:10px 0px 10px 0px;
  border-radius: 4px;

  .box {
    display: flex;
    justify-content: space-around;

    div {

    }
  }
}
</style>